{include file="common/header" /}
<link rel="stylesheet" href="__LAYUIMINI__/lib/font-awesome-4.7.0/css/font-awesome.min.css" media="all">
<style>
    body {
        background-color: #ffffff;
    }
</style>
<body>
    <fieldset class="layui-elem-field layui-field-title" style="margin-top: 20px;">
  <legend>角色添加</legend>
</fieldset>
<div class="layui-form layuimini-form">
    

    <div class="layui-form-item">
        <label class="layui-form-label required">角色名称</label>
        <div class="layui-input-block">
            <input type="text" class="layui-input" name="role_name"  value="{$info.role_name}" autocomplete="off" placeholder="请输入角色名称">
        </div>
    </div>

    

    <div class="layui-form-item">
        <label class="layui-form-label required">选择权限</label>
        <div class="layui-input-block">

            <table class="layui-table">
                  <tbody>
                    <tr>
                        <td colspan="4">
                            <input type="checkbox" lay-filter="checkall" lay-skin="primary" >
                        </td>
                    </tr>
                    {foreach name="$right_list" item="vo" key="k" }
                    <tr>
                        <td>
                            <input id="checkbox{$vo.id}" type="checkbox" name="meun[]" value="{$vo.id}" data-id="{$vo.id}"  lay-filter="checkone" lay-skin="primary" {if in_array($vo.id,$info.act_list_arr) /} checked="" {/if} >
                        </td>
                        <td>{$vo.str | raw} <i class="fa {$vo.icon}"></i>  {$vo.name}</td>
                        <td>{$vo.href}</td>
                        <td>{$vo.right}</td>
                    </tr>
                    {/foreach}
                  </tbody>
            </table>

        </div>
    </div>

    <div class="layui-form-item">
        <div class="layui-input-block">
            <input type="hidden" name="act" value="edit">
            <input type="hidden" name="role_id" value="{$role_id}">
            <button class="layui-btn" lay-submit lay-filter="saveBtn">确认保存</button>
        </div>
    </div>
</div>


<script>
    layui.use(['form','iconPickerFa'], function () {
        var form = layui.form,
            iconPickerFa = layui.iconPickerFa,
            layer = layui.layer,
            $ = layui.$;

        form.on('checkbox(checkall)', function(data){
            if(data.elem.checked){
                $('tbody input').prop('checked',true);
            }else{
                $('tbody input').prop('checked',false);
            }
            form.render('checkbox');
        });

        

        form.on('checkbox(checkone)', function(data){
            let id = $(this).attr("data-id"); 
            $.ajax({
                url:"{:url('role/getChilds')}",
                data:{'id':id},
                type:'post',
                dataType:'json',
                success:function(res){
                    let idsArr = res.data;
                    for(var i=0;i<idsArr.length;i++){
                        // let check = $("#checkbox"+idsArr[i]).is(":checked");
                        if(data.elem.checked){
                            $("#checkbox"+idsArr[i]).prop('checked',true);
                        }else{
                            $("#checkbox"+idsArr[i]).prop('checked',false);
                        }
                    }
                    form.render('checkbox');
                },
                error : function(XMLHttpRequest, textStatus, errorThrown) {
                    layer.msg('网络失败，请刷新页面后重试!',{icon: 2,time: 2000})
                }
            });
            
            
            
        });


        //监听提交
        form.on('submit(saveBtn)', function (data) {
            // var index = layer.load(1, {
            //     shade: [0.3,'#000'] //0.1透明度的白色背景
            // });
            var data = data.field;
            $.ajax({
                url:"{:url('Role/edit')}",
                data:data,
                type:'post',
                dataType:'json',
                success:function(res){
                    // console.log(res)
                    // return false
                    if(res.errcode != 1){
                        layer.msg(res.message,{icon: 2,time: 2000},function(){
                            layer.close(index);
                        })
                    }else{
                        layer.msg(res.message,{icon: 1,time: 1000},function () {
                            window.location.href = "{:url('role/list')}";
                        })
                    }
                },
                error : function(XMLHttpRequest, textStatus, errorThrown) {
                    layer.msg('网络失败，请刷新页面后重试!',{icon: 2,time: 2000})
                }
            });

            return false;
        });

    });
</script>
</body>
</html>